<template>
  <div class="upload_my_container">
    <el-tooltip
      popper-class="rich_upload_img_tip"
      effect="dark"
      content="上传图片"
      placement="bottom"
    >
      <i
        class="iconfont iconshangchuantupian rich_img_upload"
        @click="showUploadClick"
      ></i>
    </el-tooltip>
    <el-dialog
      custom-class="rich_upload_dialog"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="700px"
      title="选取图片"
      :before-close="cancelClick"
    >
      <el-upload
        :multiple="true"
        :file-list="fileList"
        :show-file-list="true"
        :on-success="handleSuccess"
        :on-error="handleError"
        :before-upload="beforeUpload"
        :accept="acceptStr"
        class="rich_upload_box"
        drag
        :action="baseUrl + '/target/smtBackground/uploadAdvertScreenshot'"
        list-type="picture-card"
        :headers="uploadHeader"
      >
        <i class="el-icon-upload upload_btn_icon"></i>
        <span class="upload_btn_text">点击上传</span>
      </el-upload>

      <div slot="footer">
        <el-button class="white_default_btn" size="medium" @click="cancelClick"
          >取消</el-button
        >
        <el-button
          class="add_btn"
          type="primary"
          size="medium"
          @click="handleSubmit"
          >确认</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import { URL_ENV } from "@/utils/request";

export default {
  name: "EditorSlideUpload",
  props: {
    color: {
      type: String,
      default: "#1890ff"
    }
  },
  data() {
    return {
      dialogVisible: false,
      listObj: {},
      fileList: [],
      uploadHeader: {},
      baseUrl: URL_ENV[process.env.VUE_APP_CURRENTMODE],
      acceptStr: ".png, .jpeg, .jpg, .gif"
    };
  },
  created() {
    this.uploadHeader = {
      "tool-platform-cookie": getToken()
    };
  },
  methods: {
    checkAllSuccess() {
      return Object.keys(this.listObj).every(
        item => this.listObj[item].hasSuccess
      );
    },
    cancelClick() {
      this.listObj = {};
      this.fileList = [];
      this.dialogVisible = false;
    },
    handleSubmit() {
      const arr = Object.keys(this.listObj).map(v => this.listObj[v]);
      if (!this.checkAllSuccess()) {
        this.$message.closeAll();
        this.$message(
          "请等待所有图片上传成功。如果有网络问题，请刷新页面并重新上传!"
        );
        return;
      }
      this.$emit("successCBK", arr);
      this.listObj = {};
      this.fileList = [];
      this.dialogVisible = false;
    },
    handleSuccess(response, file, fileList) {
      // console.log(111, response, file, fileList);
      const uid = file.uid;
      const objKeyArr = Object.keys(this.listObj);
      for (let i = 0, len = objKeyArr.length; i < len; i++) {
        if (this.listObj[objKeyArr[i]].uid === uid) {
          // this.listObj[objKeyArr[i]].url = response.files.file;
          this.listObj[objKeyArr[i]].url = response.entity.url.replace(
            /https:\/\/shentucamp.oss-cn-hangzhou.aliyuncs.com\//g,
            "/zxoss/"
          );
          this.listObj[objKeyArr[i]].hasSuccess = true;
          return;
        }
      }
    },
    handleRemove(file) {
      const uid = file.uid;
      const objKeyArr = Object.keys(this.listObj);
      for (let i = 0, len = objKeyArr.length; i < len; i++) {
        if (this.listObj[objKeyArr[i]].uid === uid) {
          delete this.listObj[objKeyArr[i]];
          return;
        }
      }
    },
    beforeUpload(file) {
      var ext = this.acceptStr;
      var isOkExt =
        ext.indexOf(file.name.substring(file.name.lastIndexOf("."))) >= 0;
      if (!isOkExt) {
        this.$message.closeAll();
        this.$message.error("只能上传" + ext + "格式的文件");
        return false;
      }
      // // 图片大小size
      // const limitSize = 1 * 1024 * 1024;
      // if (file.size >= limitSize) {
      //   this.$message.closeAll();
      //   this.$message.warning("图片大小不能超过1M");
      //   return false;
      // }
      const _self = this;
      const _URL = window.URL || window.webkitURL;
      const fileName = file.uid;
      this.listObj[fileName] = {};
      return new Promise((resolve, reject) => {
        const img = new Image();
        img.src = _URL.createObjectURL(file);
        img.onload = function() {
          _self.listObj[fileName] = {
            hasSuccess: false,
            uid: file.uid,
            width: this.width,
            height: this.height
          };
        };
        resolve(true);
      });
    },
    showUploadClick() {
      this.dialogVisible = true;
    }
  }
};
</script>

<style lang="scss">
.rich_upload_dialog {
  .el-dialog__header {
    padding-bottom: 2px;
  }
  .el-dialog__headerbtn .el-dialog__close {
    color: #363f4d;
  }
}
.rich_upload_box {
  width: 100%;
  display: flex;
  flex-direction: column-reverse;
  .el-upload.el-upload--picture-card {
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 0;
    background-color: #fff;
    border: 1px dashed rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    font-size: 0;
    &:hover {
      border: 1px dashed #1872fa;
    }
    .upload_btn_icon {
      color: #d8d8d8;
      font-size: 23px;
      line-height: 20px;
      margin-top: 0;
      position: relative;
      top: 2px;
    }
    .upload_btn_text {
      color: #1872fa;
      font-size: 14px;
      font-family: "Microsoft YaHei";
      margin-left: 12px;
    }
    .el-upload-dragger {
      height: 100%;
      width: 100%;
      border: none;
    }
  }
  .el-upload-list.el-upload-list--picture-card {
    display: block;
    width: calc(100% + 40px);
    max-height: 242px;
    overflow-y: auto;
    padding-left: 20px;
    // padding-right: 16px;
    padding-right: 0;
    box-sizing: border-box;
    margin: 12px 0 0px -20px;
    font-size: 0;
    .el-upload-list__item {
      width: 153px;
      height: 153px;
      margin-right: 16px;
      margin-bottom: 0px;
      border-radius: 4px;
      border-color: #ccc;
      img {
        display: block;
      }
      &:nth-child(4n) {
        margin-right: 0;
      }
    }
  }
}
.bottom_footer_btn {
  text-align: right;
  font-size: 0;
  .el-button {
    width: 52px;
    margin-left: 16px;
  }
}

// 新写
.rich_img_upload {
  color: #595959;
  cursor: pointer;
}
.rich_upload_img_tip {
  padding: 5px 5px;
  margin-top: 10px;
  border-radius: 0;
}
</style>
